<template>
  <div>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="homePage" @click="returnHome">首页</el-menu-item>
        <el-menu-item v-if="loginFlag" index="personalNotes" @click="editBlog">写博客</el-menu-item>
        <el-menu-item v-if="loginFlag" index="searchBlog" >
          <el-input
            placeholder="请输入内容"
            v-model="keyword">
            <el-button icon="el-icon-search"  slot="append"  @click="searchBlog"></el-button>
          </el-input>
        </el-menu-item>
        <el-submenu index="info" style="float:right">
          <template index="avatar" slot="title">
            <el-avatar :size="30" :src="user.header"></el-avatar>
          </template>
          <template index="spacing" slot="title">
            <span class="spacing"/>
          </template>
          <template index="userInfo" slot="title">{{ user.name?user.name:"请登录" }}</template>
          <el-menu-item v-if="loginFlag" index="personalCenter">个人中心</el-menu-item>
          <el-menu-item v-if="loginFlag" index="personalCenter" @click="logout">退出登录</el-menu-item>
          <el-menu-item v-if="!loginFlag" index="login">登录</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>

</template>
<script>

export default {
  name: 'Header',
  data () {
    return {
      blogs: {},
      typeList: {},
      currentPage: 1,
      total: 0,
      pageSize: 2,
      activeIndex: 'homePage',
      user: {
        username: '请登录',
        header: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      loginFlag: false,
      isLogin: false,
      username: '',
      keyword: ''
    }
  },
  created () {
    if (this.$route.path === '/edit') {
      this.activeIndex = 'personalNotes'
    } else if (this.$route.path === '/UserInfo') {
      this.activeIndex = 'personalCenter'
    }
    if (localStorage.getItem('userInfo')) {
      this.user = JSON.parse(localStorage.getItem('userInfo'))
      if (this.user) {
        this.loginFlag = true
      }
      this.$axios
        .get('/info/' + JSON.parse(localStorage.getItem('userInfo')).userId).then(respone => {
          const data = respone.data.data
          this.user.userId = data.userId
          this.user.email = data.email
          this.user.nickname = data.nickname
          this.user.username = data.username
          this.user.name = data.name
          this.user.header = data.header
          this.user.phone = data.phone
          this.user.sex = data.sex
          this.hasLogin = true
          this.$store.commit('SET_USERINFO', data)
          this.$store.commit('SET_TOKEN2', localStorage.getItem('token'))
        })
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      this.activeIndex = key
      this.contentShow(key, keyPath)
    },
    editBlog () {
      this.$router.push('/edit')
    },
    returnHome () {
      this.$router.push('/')
    },
    pageQuery (currentPage) {
      const _this = this
      this.$axios
        .get('/blogs/' + currentPage + '/' + this.pageSize + '/' + this.user.username)
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.total = res.data.data.totalSize
          _this.pageSize = res.data.data.size
          _this.currentPage = res.data.data.currentPage
        })
    },
    myBlogQuery (currentPage) {
      const _this = this
      if (this.$store.getters.getUser) {
        this.userId = this.$store.getters.getUser.userId
      }
      this.$axios
        .post('/myblogs', {
          currentPage: currentPage,
          size: this.pageSize,
          author: this.userId
        })
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.currentPage = res.data.data.currentPage
          _this.pageSize = res.data.data.size
          _this.total = res.data.data.totalSize
        })
    },
    typeQuery () {
      const _this = this
      this.$axios
        .get('/types')
        .then((res) => {
          _this.typeList = res.data.data
        })
    },
    // 退出登录
    logout () {
      const _this = this
      this.$axios.get('/logout', {
        header: {
          Authorization: localStorage.getItem('token')
        }
      }).then((res) => {
        _this.loginFlag = false
        _this.$store.commit('REMOVE_INFO')
        _this.$router.push('/login')
      })
    },
    login () {
      this.$router.push('/login')
    },
    showPersonalCenter () {
      this.$router.push('/personal')
    },
    contentShow (key, keyPath) {
      if (key === 'personalNotes') {
        this.myBlogQuery(1)
      } else if (key === 'homePage') {
        this.pageQuery(1)
      } else if (key === 'logout') {
        this.logout()
      } else if (key === 'login') {
        this.login()
      } else if (key === 'personalCenter') {
        this.showPersonalCenter()
      }
    },
    searchBlog () {
      if (this.keyword != null && this.keyword !== '') {
        if (this.$route.path === '/' || this.$route.path === '/home') {
          this.$parent.searchBlog(this.keyword, 1)
        } else {
          this.$router.push({ name: 'Home', params: { isSearch: true, keyword: this.keyword } })
        }
      }
    }
  }
}
</script>
<style>
  .menu {
    margin-top: 1%;
  }

  .spacing {
    margin-left: 5px;
  }
</style>
